<template>
    <div>
        <el-button type="primary" @click="Open">打卡弹框</el-button>
        <div style="width:800px" >
            <el-dialog title="管理" :visible.sync="seen" append-to-body >
                <div ref="myChat"></div>
                <div id="textw">
                    <el-table :data="tableData"
                              border
                              row-key="id"
                              align="left"
                    >
                        <el-table-column ref="tableColumn" v-for="(item, index) in col"
                                         :key="`col_${index}`"
                                         :prop="dropCol[index].prop"
                                         :label="item.label">
                        </el-table-column>
                    </el-table>
                </div>
            </el-dialog>


        </div>

        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script>
  import Sortable from 'sortablejs'
  // import Sortable from '@/plugins/Sortable.js';
  const cityOptions = ['上海', '北京', '广州', '深圳'];

  export default {
    data() {
      return {
        seen:false,
        drawBodyWrapper:'',
        drawheaderWrapper:'',
        checkAll: true,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true,
        col: [
          {
            label: '日期',
            prop: 'date'
          },
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '地址',
            prop: 'address'
          }
        ],
        dropCol: [
          {
            label: '日期',
            prop: 'date'
          },
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '地址',
            prop: 'address'
          }
        ],
        tableData: [
          {
            id: '1',
            date: '2016-05-02',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 100 弄'
          },
          {
            id: '2',
            date: '2016-05-04',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 200 弄'
          },
          {
            id: '3',
            date: '2016-05-01',
            name: '王小虎3',
            address: '上海市普陀区金沙江路 300 弄'
          },
          {
            id: '4',
            date: '2016-05-03',
            name: '王小虎4',
            address: '上海市普陀区金沙江路 400 弄'
          }
        ]
      }
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      Open(){
        this.seen =true;
        this.$nextTick(()=>{
          let id = this.$refs.myChat;
          let tableColumn = this.$refs.tableColumn;
          const drawBodyWrapper = document.querySelector('.el-dialog__body tbody')
          const drawheaderWrapper = document.querySelector('.el-table__header-wrapper tr')
          this.drawBodyWrapper = drawBodyWrapper;
          this.drawheaderWrapper = drawheaderWrapper;
          console.log(this.drawBodyWrapper);
          console.log(this.drawheaderWrapper);
          this.rowDrop()
          this.columnDrop()
        })
      },
      //行拖拽
      rowDrop() {
       /* const id = document.querySelector('.el-dialog__body #textw')
        console.log(id);*/
        const tbody =   this.drawBodyWrapper
        const _this = this
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0]
            _this.tableData.splice(newIndex, 0, currRow)
          }
        })
      },
      //列拖拽
      columnDrop() {
        const wrapperTr =  this.drawheaderWrapper;
        this.sortable = Sortable.create(wrapperTr, {
          animation: 180,
          delay: 0,
          onEnd: evt => {
            const oldItem = this.dropCol[evt.oldIndex]
            this.dropCol.splice(evt.oldIndex, 1)
            this.dropCol.splice(evt.newIndex, 0, oldItem)
          }
        })
      }
    }
  }
</script>
